<template>
    <div id="main" style="width: 800px; height: 800px" class="animate__animated animate__rotateInUpLeft animate__fast"></div>
</template>

<script>
import * as echarts from "echarts";
import china from '@/assets/data/china.json'
export default {
    name: "HelloWorld",
    props: {
    },
    mounted() {
        var myChart = echarts.init(document.getElementById("main"));
        echarts.registerMap('china', china); // 注册地图
        let option = {
            series: [
                {
                    type: "map",
                    map: 'china', // 引入地图数据
                    name: '详细信息',
                    data: [
                        {
                            name: '江苏省',
                            value: 6
                        },
                        {
                            name: '重庆市',
                            value: 1
                        }
                    ],
                },
            ],
            tooltip: {
                trigger: "item",
            },
            // 
            visualMap: {
                left: "right",
                min: 0,
                max: 100,
                inRange: {
                color: [
                    "#313695",
                    "#4575b4",
                    "#74add1",
                    "#abd9e9",
                    "#e0f3f8",
                    "#ffffbf",
                    "#fee090",
                    "#fdae61",
                    "#f46d43",
                    "#d73027",
                    "#a50026",
                ],
                },
                text: ["High", "Low"],
                calculable: true,
            },
        }
        myChart.setOption(option)
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>